<template>
	<view>
		<view class="login_top">
			<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
			<view class="hometext" style="display: flex;justify-content: center;align-items: center;">
				<view class="myTop flex_between">
					<view class="" style="width: 44rpx;"></view>
					<view class="">会员</view>
					<image src="../../static/stup.png"
						@click="$fun.jump(`/pages/setting/setting?mobile=${myInfo.mobile}`)" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
		<view class="myInfo flex" style="margin-top: -300rpx;">
			<image :src="myInfo.avatar" mode=""></image>
			<view class="myInfo_right">
				<view class="name">{{myInfo.nickname}}</view>
				<view class="flex">
					<view class="type" v-if="myInfo.levelname">{{myInfo.levelname}}</view>
					<view class="" style="color: #4D88FF;font-size: 24rpx;">{{myInfo.mobile}}</view>
					<!-- <image src="../../static/1(1).png" mode=""></image> -->
				</view>
			</view>
		</view>
		<view class="myearnings">
			<view class="myblance myblance1" @click="$fun.jump(`/pageA/wallet/wallet?money=${myInfo.money}`)">
				<view class="blanceitem" v-for="(item,index) in mybalance" :key="index">
					<view class="name">{{item.name}}</view>
					<view class="" style="width: 100%;overflow: hidden;;text-overflow: ellipsis;white-space: nowrap;">
						{{item.money||0}}
					</view>
				</view>
			</view>
		</view>
		<view class="orderNav">
			<view class="" @click="$fun.jump('/pageA/order/order?state=0')">
				<image src="../../static/order(1).png" mode=""></image>
				<view class="">全部订单</view>
			</view>
			<view class="" @click="$fun.jump('/pageA/order/order?state=1')">
				<image src="../../static/order(4).png" mode=""></image>
				<view class="">待付款</view>
			</view>
			<view class="" @click="$fun.jump('/pageA/order/order?state=3')">
				<image src="../../static/order(3).png" mode=""></image>
				<view class="">待发货</view>
			</view>
			<view class="" @click="$fun.jump('/pageA/order/order?state=4')">
				<image src="../../static/order(2).png" mode=""></image>
				<view class="">已完成</view>
			</view>
		</view>
		<view class="share">
			<image src="../../static/share.png" mode="" @click="$fun.jump(`/pages/shareErCode?text=${text}`)"></image>
		</view>
		<view class="moreNav">
			<view class="name">更多功能</view>
			<view class="list">
				<view class="" @click="$fun.jump(`/pageA/myteam/myteam`)">
					<image src="../../static/more(5).png" mode=""></image>
					<view class="">团队列表</view>
				</view>
				<view class="" @click="$fun.jump(`/pages/shareErCode?text=${text}`)">
					<image src="../../static/more(7).png" mode=""></image>
					<view class="">邀请好友</view>
				</view>
				<view class="" @click="$fun.jump(`/pageA/address/address`)">
					<image src="../../static/more(4).png" mode=""></image>
					<view class="">收货地址</view>
				</view>
				<view class="" @click="$fun.jump(`/pages/setting/personal`)">
					<image src="../../static/more(1).png" mode=""></image>
					<view class="">修改信息 </view>
				</view>
				<view class="" style="margin-top: 30rpx;"
					@click="$fun.jump(`/pageA/noticeList/noticeInfo?name=在线客服&type=13`)">
					<image src="../../static/more(3).png" mode=""></image>
					<view class="">联系客服</view>
				</view>
				<view class="" style="margin-top: 30rpx;"
					@click="$fun.jump(`/pageA/public/editPwd?type=0&title=&phone=${myInfo.mobile}`)">
					<image src="../../static/more(6).png" mode=""></image>
					<view class="">修改密码</view>
				</view>
			</view>
		</view>
		<!-- <u-popup :show="qrcodeshow" mode="center" @close="close">
			<view class="model">
				<view class="showservice">
					<view class="name">邀请好友扫码</view>
					<view class="flex" style="justify-content: center;">
						<uqrcode ref="uqrcode" canvas-id="qrcode" size="120" :value="text" :options="{ margin: 0 }">
						</uqrcode>
					</view>
				</view>
				<image class="del" @click="qrcodeshow = false" src="../../static/close.png" mode=""></image>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				qrcodeshow: false,
				mybalance: {},
				myInfo: {},
				text: ''
			}
		},
		onLoad() {
			const phoneInfo = uni.getSystemInfoSync();
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.$fun.ajax.post('user/gitH5Qrcode', {}).then(res => {
				if (res.code == 1) {
					this.text = res.data
					this.canvasQrPath = this.$fun.baseUrl() + res.data
				}
			})
		},
		onShow() {
			this.$fun.ajax.post('user/balance', {}).then(res => {
				this.mybalance = res.data
			})
			this.$fun.ajax.post('user/index', {}).then(res => {
				this.myInfo = res.data
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background: $uni-bg-color;
	}

	.login_top {
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(180deg, rgba(255, 153, 153, 0.5) 0%, rgba(255, 153, 153, 0) 100%);
	}

	.myTop {
		width: 750rpx;
		height: 88rpx;
		border-radius: 1rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #19181A;
		line-height: 88rpx;
		padding: 0 30rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.myInfo {
		margin: 18rpx 30rpx 30rpx 30rpx;
		width: 690rpx;
		height: 180rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
		}

		&_right {
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			margin-left: 10rpx;

			.name {
				// margin-bottom: 20rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #333333;
			}

			.type {
				font-weight: 400;
				font-size: 20rpx;
				color: #4D88FF;
				// width: 58rpx;
				height: 32rpx;
				padding: 0 10rpx;
				background: rgba(77, 136, 255, 0.1);
				border-radius: 8rpx;
				line-height: 32rpx;
				text-align: center;
			}

			image {
				width: 84rpx;
				height: 32rpx;
				border-radius: 0;
				margin-left: 10rpx;
			}
		}
	}

	.myearnings {
		margin: 20rpx 30rpx;

		.myblance {
			padding: 30rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			display: grid;
			grid-template-columns: 1fr 1fr;

			.name {
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}

			.blanceitem {
				// width: 50%;
			}
		}

		.myblance1 {
			width: 690rpx;
			// height: 132rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 0;
		}
	}

	.share {
		margin: 0 auto;
		margin-bottom: 30rpx;
		text-align: center;

		image {
			width: 690rpx;
			height: 180rpx;
			border-radius: 24rpx;
		}
	}

	.orderNav {
		width: 690rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		padding: 30rpx 30rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		text-align: center;

		image {
			width: 64rpx;
			height: 64rpx;
		}
	}

	.moreNav {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx 0;
		margin: 0 auto;

		.name {
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			padding-left: 30rpx;
		}

		.list {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			// margin-top: 30rpx;
			display: grid;
			padding: 30rpx;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			text-align: center;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}

	.model {
		position: fixed;
		top: 30%;
		left: 195rpx;
		width: 360rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		text-align: center;

		.name {
			font-weight: 500;
			font-size: 28rpx;
			color: #19181A;
			margin: 40rpx 0 30rpx;
		}

		.del {
			width: 53rpx;
			height: 53rpx;
			position: absolute;
			bottom: -80rpx;
			left: 154rpx;
		}
	}
</style>